<template>
    <div :class="{ 'dialog-height': isScroll }">
        <el-dialog
          v-model="dialogVisible"
          v-bind="$attrs"
          :width="width"
          :center="center"
          :destroy-on-close="true"
          :lock-scroll="false"
          class="custom-dialog-container"
        >
          <template #header="{titleId,titleClass}">
              <div class="custom-header">
                  <span :id="titleId" :class="titleClass">{{title}}</span>
              </div>
          </template>
          <template #footer v-if="footer">
            <span class="dialog-footer">
                <el-button @click="onCancel">
                  {{cancelText}}
              </el-button>
              <el-button type="primary" @click="onOk">{{okText}}</el-button>
            </span>
          </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, withDefaults, watch } from "vue";
interface IDialogProps {
  visible: boolean;
  title: string;
  isScroll: boolean;
  footer?: boolean;
  width?: string | number;
  center?: boolean;
  okText?: string;
  cancelText?: string;
  confirm?: ()=>void;
  cancel?: ()=>void;
}
// 默认值
const props = withDefaults(defineProps<IDialogProps>(), {
  visible: false,
  title: "",
  isScroll: false,
  footer: true,
  width: "550px",
  center: false,
  okText: '确定',
  cancelText: '取消'
});
// emits
const emits = defineEmits(["update:visible","confirm","cancel"]);
const dialogVisible = ref<boolean>(false);
watch(
  () => props.visible,
  (val) => {
    dialogVisible.value = val;
  }
);
watch(
  () => dialogVisible.value,
  (val) => {
    emits("update:visible", val);
  }
);

// 确认
const onOk = () => {
    dialogVisible.value = false;
    emits('confirm')
}
// 取消
const onCancel = () => {
    dialogVisible.value = false;
    emits('cancel')
}
</script>

<style scoped lang="scss">
.custom-header {
  display: inline-block;
  width: 95%;
  height: 100%;
  margin: -5px 0 5px 0;
  .el-dialog__title {
    color: #fff;
  }
}
</style>
